<template>
  <div id="file">
    <div class="Top">
      <a-input-search placeholder="搜索" style="width: 200px" @search="onSearch" />
      <a-button @click="visible = true"> <a-icon type="upload" /> 文件上传 </a-button>
    </div>
    <div v-for="item in searchFileData" :key="item.id">
      <file-item class="pdf-item" :pdfData="item"></file-item>
    </div>
    <a-modal
      title="文件上传"
      :visible="visible"
      @ok="handleSubmit"
      @cancel="handleCancel"
    >
      <template slot="footer">
        <a-button key="back" @click="handleCancel"> 取消 </a-button>
        <a-button key="submit" type="primary" @click="handleSubmit"> 上传 </a-button>
      </template>
      <a-form
        :form="form"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 12 }"
        @submit="handleSubmit"
      >
        <a-form-item label="文件方向">
          <a-input
            v-decorator="[
              'direction',
              { rules: [{ required: true, message: '请输入文件方向' }] },
            ]"
          />
        </a-form-item>
        <a-form-item label="文件类型">
          <a-input
            v-decorator="[
              'type',
              { rules: [{ required: true, message: '请输入文件类型' }] },
            ]"
          />
        </a-form-item>
        <a-form-item label="上传">
          <a-upload
            :file-list="fileList"
            :remove="handleRemove"
            :before-upload="beforeUpload"
          >
            <a-button> <a-icon type="upload" /> 选择文件 </a-button>
          </a-upload>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import fileItem from "./fileData.vue";
export default {
  components: {
    fileItem,
  },
  data() {
    return {
      visible: false,
      form: this.$form.createForm(this, { name: "coordinated" }),
      AllFileData: [],
      currentFileData:[],
      fileList: [],
    };
  },
  created() {
    this.searchFile();
  },
  computed: {
      searchFileData(){
          let templateArr = [];
          this.currentFileData.forEach((item) => {
            let isAll = true;
            templateArr.forEach((items, index) => {
              if (templateArr[index][item.type]) {
                isAll = false;
                templateArr[index][item.type].push(item);
              }
            });
            if (isAll) {
              templateArr.push({ [item.type]: [item] });
            }
          });
          return templateArr
      }
  },
  methods: {
    onSearch(value) {
      console.log(value);
      var reg = new RegExp(value); 
      this.currentFileData = this.AllFileData.filter(item=>reg.test(item.name))
    },
    searchFile() {
      this.$axios.post("/pdf/search").then((res) => {
        this.AllFileData = res.data.data;
        this.currentFileData = res.data.data
      });
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        console.log(values);

        if (!err) {
          console.log("Received values of form: ", values);
          this.upload(values);
          this.visible = false;
        }
      });
    },
    upload(values) {
      let formData = new FormData();
      for (const key in this.fileList) {
        formData.append("fileList", this.fileList[key]);
      }
      formData.append("username", this.$store.state.user.userInfo.username);
      formData.append("direction", values.direction);
      formData.append("type", values.type);
      this.$axios
        .post("/upload/PDF", formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((res) => {
          console.log(res);
          if (res.data.error === -1) {
            this.dialogVisible = false;
            this.$message.success("上传成功");
            this.searchFile();
          } else {
            this.$message.warning("上传失败");
          }
        });
      this.dialogVisible = true;
    },
    handleOk(e) {},
    handleCancel(e) {
      console.log("Clicked cancel button");
      this.visible = false;
    },
    handleRemove(file) {
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
    },
    beforeUpload(file) {
      this.fileList = [...this.fileList, file];
      return false;
    },
  },
};
</script>

<style scoped lang="less">
#file {
  box-sizing: border-box;
  padding: 50px;
  position: relative;
  .pdf-item {
    margin-top: 100px;
  }
  .Top {
    padding: 0 60px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    height: 50px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }
}
</style>
